<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-06-19 18:54:19
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-06-25 14:12:30
 * @FilePath: \appGly\pages\Station\components\xqview3.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="" style="height: 100%">
    <scroll-view
      scroll-y="true"
      class="scroll-Y"
      refresher-background="#f4f7f8"
    >
      <view class="u-flex card1">
        <view>
          <view class="text1 u-flex">{{ dqmonth }}</view>
          <view class="text2 u-flex">收入{{ zje }}元</view>
        </view>
        <view
          class="iconfont iconmingxi"
          style="font-size: 24px"
          @click="() => (show = true)"
        ></view>
      </view>

      <!-- {{ value1 }} -->
      <view>
        <view
          v-for="(item, key) in list"
          class="GetRfDayitem u-flex u-flex-between"
          :key="key"
          @click="GetRfDayitemtap(item)"
        >
          <view>
            {{ item.sj }}
          </view>
          <view>{{ item.je / 100 }}元</view>
        </view>
        <u-datetime-picker
          :show="show"
          v-model="value1"
          :maxDate="maxDate"
          mode="year-month"
          @confirm="confirm"
          @cancel="() => (show = false)"
        ></u-datetime-picker>
      </view>
    </scroll-view>
    <srxq ref="srxq"></srxq>
  </view>
</template>
<script>
  import srxq from "./srxq.vue";
  export default {
    components: {
      srxq,
    },
    props: {
      item: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    data() {
      return {
        maxDate: new Date().getTime(),
        dqmonth: uni.$z.timefn.gettime(0, new Date(), "yyyy-mm"),
        list: [],
        value1: uni.$z.timefn.gettime(0, new Date(), "yyyy-mm"),
        show: false,
      };
    },
    created() {
      // this.init();
    },
    computed: {
      zje() {
        let je = 0;
        this.list.forEach((element) => {
          je += Number(element.je);
        });
        return je / 100;
      },
      searchdata() {
        let r = {};
        // 获取当前日期
        var currentDate = new Date();
        // 设置目标年月
        var targetYear = Number(this.dqmonth.substr(0, 4));
        var targetMonth = Number(this.dqmonth.substr(5, 2));
        var firstDayOfMonth = new Date(targetYear, targetMonth - 1, 1);
        var lastDayOfMonth = new Date(targetYear, targetMonth, 0);
        if (lastDayOfMonth > currentDate) {
          lastDayOfMonth = currentDate;
        }
        r.sjs = this.$z.timefn.gettime(0, firstDayOfMonth);
        r.sje = this.$z.timefn.gettime(0, lastDayOfMonth);
        r.pcsid = this.item.pcs;
        // console.log(this.item);
        return r;
      },
      user() {
        return this.$store.state.user.USearch;
      },
    },
    watch: {
      searchdata: {
        handler() {
          this.init();
        },
        immediate: true,
      },
    },
    methods: {
      GetRfDayitemtap(item) {
        this.$refs.srxq.init({
          pcsid: this.item.pcs,
          frid: this.$store.state.user.USearch.frid,
          ...item,
        });
      },
      confirm(e) {
        this.dqmonth = uni.$z.timefn.gettime(0, new Date(e.value), "yyyy-mm");
        this.show = false;
      },
      async init() {
        let user = this.user;
        if (!user.uUser) {
          user = await this.$store.dispatch("user/getuser");
        }
        let reqdata = {
          ...this.searchdata,
        };
        let url = "/GetRfDay";
        if (user.frid && user.frid != "0") {
          url = "/GetRfFrcdDay";
          reqdata.frid = user.frid;
        }
        let data = await this.$z.request(url, reqdata);
        data = data.reverse();
        this.list = data;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .card1 {
    background: #fff;
    border-radius: 16rpx;
    margin: 20rpx 0;
    padding: 22rpx 30rpx;
    display: flex;
    justify-content: space-between;
    .text1 {
      height: 48rpx;
    }
    .text2 {
      color: #8f8f94;
      height: 48rpx;
    }
  }
  .scroll-Y {
    height: 100%;
  }
  .GetRfDayitem {
    height: 92rpx;
    position: relative;
    background: #fff;
    padding: 0 30rpx;
    &::after {
      content: "";
      position: absolute;
      left: 12rpx;
      right: 0;
      height: 2rpx;
      background: #eee;
      bottom: 0;
    }
  }
</style>
